<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式卡片</title>
    <link rel="stylesheet" href="./css/card.css">
</head>

<body>
    <div class="container">
        <div class="img-box">
            <h1>Nike</h1>
            <img src="./img/nike.png" alt="">
        </div>
        <div class="text-box">
            <h2 class="title">Nike Air Max 270</h2>
            <h3 class="sub-title">RUNING COLLECTION</h3>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo natus ipsum praesentium explicabo nesciunt
                consequatur ea error similique cum non doloribus quis libero quam rem, cumque aspernatur provident
                quibusdam deleniti?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, vero totam maiores
                error excepturi optio delectus sequi aspernatur tenetur tempora amet harum at ullam dolore quas
                consequuntur magni laboriosam laudantium?Lorem ipsum dolor sit itaque, nisi rerum accusantium quae
                officia nesciunt vero ex libero veniam quod corporis atque.
            </p>
            <div class="info">
                <span class="price">$150.99</span>
                <a href="javascript:void(0)" class="buy" >buy now</a>
            </div>

        </div>
    </div>
</body>

</html>